<template>
  <div class="loginPage">
    <div class="loginWrap" >
      <div class="loginZoom" v-if="notRegeister">
        <p class="loginTitle">中国国机集团云党建</p>
        <div class="loginArea1">
          <div class="loginInput">
            <input type="text" placeholder="输入手机号" id="telPhoneCheck"  ref="telPhoneCheck">
            <p class="errorTips" v-if="errorTips" :class="{'animated shake':errorTips}">手机格式错误</p>
          </div>
          <div class="loginBtn">
            <input type="button" value="下一步" id="loginBtn" @click.stop="nextStep">
          </div>
          <div class="loginTips">
            <p>未注册的用户将自动注册</p>
          </div>
        </div>
      </div>
      <div class="fillPassword" v-if="regeister">
        <p class="loginTitle">{{passwordText}}</p>
        <div class="loginArea1">
          <div class="loginInput">
            <input type="password"  id="fillPhone" placeholder="请输入密码" ref="fillPhone">
            <span class="eyes" @click.stop="togglePassword"></span>
          </div>
          <p class="codeerrorTips" v-if="loginError"><span>登录失败，账号或密码错误</span></p>
          <div class="loginBtn">
            <input type="button" value='登录' id="finished" ref="loginBtn" @click.stop="loginIn">
          </div>
          <p class="forgetPassword" v-if="loginError">
            <a >
              忘记密码
            </a>
          </p>
        </div>
      </div>
      <div class="show" v-if="show">
        <p class="loginTitle sendCode">输入验证码</p>
        <p class="code">验证码已发送至  <span id="tel">{{userTel}}</span></p>
        <loginVue @input="checkCode"></loginVue>
          <p class="codeerrorTips" v-if="showTips"
             id="codeerrorTips2"
             ref="codeerrorTips2"
             :class="{'shake animated':showTips}"
          >
            <span  >验证码错误</span></p>
          <div class="loginBtn2 sendLatter" >
            <input type="button" v-model="resendValue" id="codeBtn" @click.stop="resend" :disabled="disabled">
          </div>
        <!--</div>-->
      </div>
    </div>
    <Alarm :alarm="alarm" v-if="showAlarm" @cancel="cancel" @confirm="confirm"></Alarm>
  </div>
</template>
<script>
  import loginVue from '../../components/code.vue'
  import Alarm from '../../components/alarm.vue'
    export default({
    data (){
        return {
          notRegeister:1,
          regeister:0,
          show:0,
          loginInfo:'',
          index:0,
          showTips:false,
          errorTips:false,
          alarm:'',
          showAlarm:false,
          resendValue:'59s后重发',
          timer:null,
          userTel:'',
          count:59,
          disabled:true,
          passwordText:'',
          passwordTips:'',
          loginError:'',
          setPassword:''

        }
    },
      components:{
        loginVue:loginVue,
        Alarm:Alarm
      },
    methods:{
      cancel(){
        this.showAlarm =false
      },
      confirm(){
        this.showAlarm =false
      },
      startCount(){
          let that =this
        this.timer =setInterval((res=>{
            that.count --
            that.resendValue =that.count+'s后重发'
          if(that.count===0){
                that.resendValue='重发'
                clearInterval(that.timer)
                that.disabled =false
          }
        }),1000)
      },
      togglePassword(){
          if(this.$refs.fillPhone.type==='password'){
            this.$refs.fillPhone.type='text'
          }else if (this.$refs.fillPhone.type==='text'){
            this.$refs.fillPhone.type='password'
          }
      },
      nextStep(){
        //validate  is ok?

        var reg2 =/^(((13|14|15|16|18|17|19)\d{9}))$/;
        if( !reg2.test(this.$refs.telPhoneCheck.value) ){
            this.alarm ='请输入正确的手机号码'
            this.showAlarm =true
             return false;
        }
        this.userTel =this.$refs.telPhoneCheck.value
        this.startCount()
        //post data
        // if tel is exit??


        //注册用户  显示用户的填写密码
        //input  password
//        this.$axios('')
//          this.show =0
//          this.regeister =1
//          this.notRegeister =0
        //非注册用户 填写用户的短信验证码
        this.show =1
        this.regeister =0
        this.notRegeister =0
        //else  regeister
      },
      resend(){
          //重新请求短信地址
          this.startCount()
          this.disabled =true
          this.count =60
      },
      checkCode(params){
          //验证短信是否正确
        if(params==='111111'){
            //right
          this.show =0
          this.regeister =1
          this.notRegeister =0
          this.passwordText ='设置密码'


          //setPassword
        }else{
            //wrong
            //showTips
          this.showTips=true
          setTimeout((res)=>{
            this.showTips=false
          },1500)
        }
      },
      loginIn(){
          //if setPassword
          this.showAlarm =true
          this.alarm ='登录密码错误'
          //else  fillPassword
      }
    },
      mounted(){

      }
  })
</script>
<style lang="stylus">
  .eyes{
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
not supported by any browser */
  }

  .loginPage{
    width: 100%;
    height: 100%;
  }
  body,html{
    width: 100%;
    height: 100%;
  }
  .loginWrap{
    width: 100%;
    height: 100%;
    background-image: url("../../../static/images/login.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
  }
  .loginWrap .loginZoom,.loginWrap .fillPassword{
    position: absolute;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
  }
  .loginTitle{
    font-size: 0.38rem;
    color: white;
    font-weight: bold;
    text-align: center;
    padding-top: 2.9rem;
  }
  .loginArea1{
    margin: 0 0.76rem;

  }
  .loginInput{
    position: relative;
    height: 0.8rem;
  }

  .loginArea1{
    margin-top: 0.65rem;
  }
  .loginArea1 input,#codeBtn{
    width: 100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding-left: 0.3rem;
    height:0.8rem;
    border-radius:0.1rem;
    -webkit-border-radius: 0.1rem;
    font-size: 0.34rem;
    border: none;
    outline: none;
  }
  .loginInput input{

    background: rgba(255,255,255,0.9);
  }
  ::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999;
    font-size: 0.3rem;
  }
  .loginInput .errorTips{
    position: absolute;
    right: 0.6rem;
    top:0;
    height: 100%;
    padding-right: 0.4rem;
    background-image: url("../../../static/images/errorTips.png");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 0.3rem 0.3rem;
    font-size:0.24rem;
    color: #e83328;
    line-height: 0.8rem;
    display: none;
  }
  .loginInput .eyes{
    position: absolute;
    right: 0.3rem;
    top:0;
    height: 100%;
    width: 0.68rem;
    background-image: url("../../../static/images/eyes2.png");
    background-size: 0.38rem 0.24rem;
    background-repeat: no-repeat;
    background-position: center;
    display: inherit;
  }
  .loginBtn{
    width: 100%;
    height: 0.8rem;
    margin-top: 0.3rem;

  }
  .loginBtn2{
    height: 0.8rem;
    margin-top: 0.3rem;
    margin-left: 0.76rem;
    margin-right: 0.76rem;
  }
  .loginBtn input,.loginBtn2 input{
    text-align: center;
    line-height: 0.8rem;
    font-size:0.34rem;
    color: #ffffff;
    background: linear-gradient(to right, #ca2613 0%, #e59f33 100%);
  }
  .loginTips {
    text-align: center;
    font-size: 0.24rem;
    color: white;
    margin-top: 0.2rem;
  }
  @-webkit-keyframes shake {
    from,
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
      -webkit-transform: translate3d(-10px, 0, 0);
      transform: translate3d(-10px, 0, 0);
    }

    20%,
    40%,
    60%,
    80% {
      -webkit-transform: translate3d(10px, 0, 0);
      transform: translate3d(10px, 0, 0);
    }
  }

  @keyframes shake {
    from,
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
      -webkit-transform: translate3d(-10px, 0, 0);
      transform: translate3d(-10px, 0, 0);
    }

    20%,
    40%,
    60%,
    80% {
      -webkit-transform: translate3d(10px, 0, 0);
      transform: translate3d(10px, 0, 0);
    }
  }

  .shake {
    -webkit-animation-name: shake;
    animation-name: shake;
  }

  .animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  .code{
    text-align: center;
    font-size: 0.24rem;
    color: white;
    padding-top: 0.13rem;
  }
  .sendCode{
    font-weight: normal;
  }
  .loginArea2 .loginAreaWrap{
    position: relative;
    height: 0.9rem;
  }
  .loginAreaWrap input{
    border: none;
    width: 6.4rem;
    height: 0.9rem;
    display: block;
    margin: 0 auto;
    z-index: 100;
    position: relative;
    opacity: 0.5;
     color: #000;
    letter-spacing: 0.5rem;
    padding-left: 0.4rem;
    -webkit-appearance: none;
  }

  #codeBtn{
    /*margin:0 0.76rem*/
  }
  .loginArea2 .codeArea{
    text-align: center;
    width: 6.2rem;
    height: 0.7rem;
    display: flex;
    justify-content: space-around;
    position: absolute;
    bottom: 0;
    left: 0.68rem;

  }
  .loginArea2 .codeArea li{
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 0.13rem;
    text-align: center;
    line-height: 0.7rem;
    background-color: rgba(255,255,255,0.7);
    margin: 0 0.1rem ;
  }
  .codeerrorTips{
    text-align: center;
    padding-top:0.2rem;
  }
  .codeerrorTips span{
    display: inline-block;
    position: relative;
    font-size: 0.24rem;
    color: white;
    padding-left: 0.5rem;


  }
  .codeerrorTips span:before{
    position: absolute;
    content: '';
    left: 0;
    top:50%;
    margin-top: -0.15rem;
    width: 0.3rem;
    height: 0.3rem;
    background-image: url("../../../static/images/errorTips.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.3rem 0.3rem;
  }
  .codeerrorTips span.noTips:before{
    width: 0;
  }
  .setPassword{
    display: none;
  }
  .fillPassword{
    /*display: none;*/
  }
  .forgetPassword{
    font-size: 0.24rem;
    color: white;
    text-align: center;
    padding-top: 0.2rem;
  }
  .forgetPassword a{
    color: white;

  }
</style>
